<template>
  <div class="signup-page mx-auto p-3 w-330">
    <validate-form @form-submit="onFormSubmit">
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
        <validate-input
          :rules="emailRules"
          v-model="formData.email"
          placeholder="请输入邮箱地址"
          type="text"
          ref="inputRef"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">昵称</label>
        <validate-input
          :rules="nameRules"
          v-model="formData.nickName"
          placeholder="请输入昵称"
          type="text"
          ref="inputRef"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <validate-input
          :rules="passwordRules"
          v-model="formData.password"
          placeholder="请输入密码"
          type="password"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <validate-input
          :rules="repeatPasswordRules"
          v-model="formData.repeatPassword"
          placeholder="请再次输入密码"
          type="password"
        ></validate-input>
      </div>
      <template #submit>
        <span class="btn btn-danger">注册新用户</span>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
// import { useStore } from "vuex";
import http from '../util/http';
import ValidateInput, { RulesProp } from "../components/ValidateInput.vue";
import ValidateForm from "../components/ValidateForm.vue";
import createMessage from "../components/createMessage";
const emailReg = /^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
export default defineComponent({
  name: "Signup",
  components: {
    ValidateInput,
    ValidateForm,
  },
  setup() {
    const router = useRouter();
    // const store = useStore();

    const formData = reactive({
      email: "",
      nickName: "",
      password: "",
      repeatPassword: "",
    });

    const emailRules: RulesProp = [
      { type: "require", message: "电子邮箱地址不能为空" },
      { type: "email", message: "请输入正确的电子邮箱格式" },
    ];

    const nameRules: RulesProp = [{ type: "require", message: "昵称不能为空" }];

    const passwordRules: RulesProp = [
      { type: "require", message: "密码不能为空" },
    ];

    const repeatPasswordRules: RulesProp = [
      { type: "require", message: "重复密码不能为空" },
      {
        type: "custom",
        message: "密码不相同",
        validator: () => {
          return formData.password === formData.repeatPassword;
        },
      },
    ];

    const onFormSubmit = async (result: boolean) => {
      if (result) {
        const payload = {
            email:formData.email,
            password:formData.password,
            nickName:formData.nickName
        };

        http.post('/users',payload).then(data => {
            console.log(data);
            createMessage('注册成功 正在跳转登录页面','success');
            setTimeout(() => {
                router.push('/login');
            },2000)
        }).catch(e => {
            console.log(e);
        })
      }
    };

    const emailRef = reactive({
      val: "",
      error: false,
      message: "",
    });

    const validataEmail = () => {
      if (emailRef.val.trim() === "") {
        emailRef.error = true;
        emailRef.message = "can not be empty";
      } else if (!emailReg.test(emailRef.val)) {
        emailRef.error = true;
        emailRef.message = "Should be vald emil";
      } else {
        emailRef.error = false;
      }
    };

    return {
        formData,
      emailRef,
      validataEmail,
      emailRules,
      nameRules,
      passwordRules,
      repeatPasswordRules,
      onFormSubmit,
    };
  },
});
</script>
